import { divide } from 'lodash';
<template>
  <a-modal
    :visible="dialogVisible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="800"
    :unmount-on-close="true"
  >
    <template #title> 客户历史记录 </template>
    <div class="search">
      <div>
        <a-input-search
          search-button
          @press-enter="tableRef.loadData()"
          style="width: 200px"
          v-model="keyWord"
          @search="tableRef.loadData()"
        ></a-input-search>
        <a-button
          type="outline"
          style="margin: 0 20px"
          @click="
            () => {
              keyWord = '';
              tableRef.loadData();
            }
          "
        >
          <template #icon> <icon-refresh /> </template>重置</a-button
        >
      </div>
    </div>
    <TableTurn
      :table-data="getData"
      ref="tableRef"
      :args="{
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
      }"
    >
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="物料编码"
        data-index="number"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="物料名称"
        data-index="name"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="规格型号"
        data-index="spec"
      >
      </a-table-column>
    </TableTurn>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, ref, computed } from 'vue';
  import { getOrderHistoryProduct } from '@/api/order-management/client-management/order/index';
  import { cloneDeep } from 'lodash';

  const props = withDefaults(
    // 参数说明
    defineProps<{
      visible?: boolean;
      clientId: number;
    }>(),
    {
      visible: false,
    }
  );
  const emit = defineEmits(['update:visible', 'searcchData']);
  const keyWord = ref('');
  let tableRef = ref();

  const dialogVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const handleOk = () => {
    emit('searcchData', cloneDeep(tableRef.value.selectedList));
    emit('changeVisible', false);
  };

  const getData = async (page: any) => {
    try {
      const res = await getOrderHistoryProduct({
        ...page,
        id: props.clientId,
        keyword: keyWord.value,
      });
      console.log(res);
      return Promise.resolve(res);
    } catch (error) {
      console.log(error);
    }
  };

  const handleCancel = () => {
    dialogVisible.value = false;
  };
</script>

<style lang="less" scoped>
  .search {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
</style>
